<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    @cancel="handleCancell"
    cancelText="关闭"
    @ok="handleOk">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" class="form_generation">
        <div class="one_list_wrap">
          <a-form-item label="项目标题" class="one_list">
            <a-input placeholder="请输入项目标题" class="one_list_input" v-decorator="['title',validatorRules.title]" />
          </a-form-item>
        </div>
        <div class="two_list_wrap">
          <a-form-item label="项目编号" class="two_list">
            <a-input placeholder="请输入项目编号" class="two_list_input" v-decorator="['code',validatorRules.code]" />
          </a-form-item>
        </div>
        <div class="two_list_wrap">
          <a-form-item label="所属行业" class="two_list">
            <a-select style="width:62%;" placeholder="请选择行业" @change="industryChange" v-decorator="['industryName',validatorRules.industryName]">
              <a-select-option v-for="(item,index) in listAll" :key="index" :value="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <div class="two_list_wrap">
          <a-form-item label="发布时间" class="two_list">
            <datepicker class="two_list_input" v-decorator="['startDate',validatorRules.startDate]"></datepicker>
          </a-form-item>
        </div>
        <div class="two_list_wrap">
          <a-form-item label="截止时间" class="two_list">
            <datepicker class="two_list_input" v-decorator="['endDate']"></datepicker>
          </a-form-item>
        </div>
        <div class="two_list_wrap">
          <a-form-item label="获取文件时间" class="two_list">
            <a-range-picker class="two_list_input" @change="getFileTime" :value="fileDate" />
          </a-form-item>
        </div>
        <div class="two_list_wrap">
          <a-form-item label="信息类型" class="two_list">
            <a-select placeholder="请选择信息类型" v-decorator="['biddingTypeId',validatorRules.biddingTypeId]" style="width:62%;">
              <a-select-option v-for="(item,index) in optionDataList" :key="index" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <div class="two_list_wrap">
          <a-form-item label="所属地区" class="two_list">
            <selectcity class="two_list_input" style="width:62%;" v-decorator="['districtName',validatorRules.districtName]" @change="getCitycode"></selectcity>
          </a-form-item>
        </div>
        <div class="one_list_wrap">
          <a-form-item label="标讯内容" class="one_list">
            <j-editor style="width:95%;" v-decorator="['content',validatorRules.content]"></j-editor>
          </a-form-item>
        </div>
      </a-form>
    </a-spin>
  </a-modal>

</template>

<script>
  import validateAnt from '@/utils/validateAnt'
  import pick from 'lodash.pick'
  import datepicker from '@/components/date/DatePicker'
  import JEditor from '@/components/jeecg/JEditor'
  import selectcity from '@/components/selectcity/SelectCity'

  import {
    postAction
  } from '@/api/manage'

  import {
    getListAll,
    getSearchOption
  } from '@/api/api'
  export default {
    components: {
      JEditor,
      datepicker,
      selectcity
    },
    data() {
      return {
        title: '操作',
        visible: false, // 是否启用本页面
        confirmLoading: false,
        model: {},
        listAll: [],
        fileDate: [],
        optionDataList: [],
        id: '',
        cityCode: '',
        industryId: '',
        wjsmkssj: null,
        wjsmjzsj: null,
        validatorRules: {
          title: validateAnt.required,
          code: validateAnt.required,
          industryName: validateAnt.required,
          startDate: validateAnt.required,
          biddingTypeId: validateAnt.required,
          districtName: validateAnt.required,
          content: validateAnt.required
        },
        url: {
          edit: '/bid/edit'
        }
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this)
    },
    mounted() {
      this.loadData()
    },
    methods: {
      // getCitycode(city, cityCode) {
      //   this.cityCode = cityCode
      // },
      loadData() {
        // 获取行业数据
        getListAll().then((res) => {
          if (res.success) {
            this.listAll = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
        // 标讯类型
        getSearchOption().then((res) => {
          if (res.success) {
            this.optionDataList = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      edit(record) {
        this.form.resetFields()
        this.fileDate = []
        this.model = Object.assign({}, record)
        this.id = this.model.id
        this.industryId = this.model.industryId
        this.wjsmkssj = this.model.wjsmkssj
        this.wjsmjzsj = this.model.wjsmjzsj
        if(record.fullRegion){
          this.model.districtName=record.fullRegion.replace("中国,",'')
        }
        if (this.wjsmkssj != null && this.wjsmjzsj != null) {
          this.fileDate.push(this.wjsmkssj, this.wjsmjzsj)
        }
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'title', 'code', 'industryName', 'startDate',
            'endDate', 'biddingTypeId', 'districtName', 'content'))
        })
      },
      industryChange(value) {
        this.listAll.map((v) => {
          if (value == v.name) {
            this.industryId = v.id
          }
        })
      },
      getFileTime(value, valueString) {
        this.fileDate = []
        this.wjsmkssj = valueString[0]
        this.wjsmjzsj = valueString[1]
        this.fileDate.push(this.wjsmkssj, this.wjsmjzsj)
      },
      handleCancell() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        const that = this
        this.form.validateFields(
          (err, values) => {
            if (!err) {
              let formData = Object.assign(this.model, values)
              formData.wjsmkssj = this.wjsmkssj
              formData.wjsmjzsj = this.wjsmjzsj
              formData.industryId = this.industryId
              // formData.districtId = this.cityCode
              postAction(that.url.edit, formData).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  that.close()
                } else {
                  that.$message.warning(res.message)
                }
              }).finally(() => {
                that.confirmLoading = false
              })
            }
          })
      }
    }
  }
</script>
</script>

<style scoped>
  @import '../../../../public/style/common.css';

  .errorExplain {
    width: 81%;
    margin-left: 14%;
    color: #f5222d;

  }

  .errorExplain label {
    font-size: 12px;
  }
</style>
